import React, { useState } from 'react';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { Box, Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { IContext } from 'beta/typings/context';
import ChooseNumber from './containers/ChooseNumber';
import ChangeUserOnNumber from './containers/ChangeUserOnNumber';
import MoveNumber from './containers/MoveNumber';
import Steps from 'beta/store/steps';
import { useTranslation } from 'beta/utils/i18n';

type AddNumberProps = {
  steps: Steps;
  customerId: string;
  contractId: string;
};

const COLOR = 'orange';

const AddNumber = ({ customerId, contractId, steps }: AddNumberProps) => {
  const { t } = useTranslation('alltSaman');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [needsDifferentStep, setNeedsDifferentStep] = useState(false);
  const getNeedOfDifferentStep = (needs: boolean) => {
    setNeedsDifferentStep(needs);
  };
  const getPhoneNumber = (number: string) => {
    setPhoneNumber(number);
  };
  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/askriftir/${contractId}`}
      title={t('alltSaman.addNumber')}
      subTitle={t('alltSaman.title')}
      icon="mobilePlus"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('alltSaman.infoAnd')}
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/alltsaman/spurningar" target="__blank">
              {t('alltSaman.questions')}
            </a>
          </Text>
        </Box>
      }
    >
      <ChooseNumber
        color={COLOR}
        isNovaNumber={getNeedOfDifferentStep}
        sendPhoneNumber={getPhoneNumber}
        steps={steps}
      />
      {!needsDifferentStep ? (
        <MoveNumber color={COLOR} phoneNumber={phoneNumber} steps={steps} />
      ) : (
        <ChangeUserOnNumber color={COLOR} phoneNumber={phoneNumber} steps={steps} />
      )}
    </StepWrapper>
  );
};

AddNumber.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    contractId: query.contractId,
    namespacesRequired: ['alltSaman', 'steps'],
  };
};

export default inject('steps')(observer(AddNumber));